<%@ taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript">
  var grid = jQuery("#listProduct");
  jQuery("#listProduct").jqGrid(
      {
        url : '${pageContext.request.contextPath}/inventory/product/getProducts.action',
        datatype : "json",
        colNames : ['ID','version','<s:property value="getText(\'field.product.name\')" />',
            '<s:property value="getText(\'field.product.category.name\')" />',
            '<s:property value="getText(\'field.product.attribute.count\')" />'],
        colModel : [{
          name : 'id',
          index : 'id',
          editable : false,
          hidden : true,
          editrules : {
            edithidden : false
          },
          width : 10
        },{
          name : 'version',
          index : 'version',
          editable : true,
          hidden : true,
          width : 2
        },{
          name : 'name',
          index : 'name',
          editable : true,
          editrules : {
            required : true,
            edithidden : false,
          },
          width : 200
        },{
          name : 'categories',
          index : 'categories',
          width : 350,
          editable : false,
          sortable : false
        },{
          name : 'productAttributeCount',
          index : 'productAttributeCount',
          width : 100,
          editable : false,
          sortable : false
        }],
        jsonReader : {
          root : "rows",
          page : "page",
          total : "total",
          records : "records",
          repeatitems : false,
          id : "id",
          cell : "",
          userdata : ""
        },
        rowNum : 10,
        rowList : [10,20,30],
        pager : '#pagingProduct',
        sortname : 'name',
        viewrecords : true,
        sortorder : "asc",
        multiselect : false,
        autowidth : true,
        height : 350,
        caption : "<s:property value='getText(\"title.list.product\")' />"
      }).navGrid('#pagingProduct',{
    edit : true,
    add : true,
    del : false,
    view : true,
    search : false,
    addfunc : function() {
      $('#mainListProduct').hide(10,function() {
        $('#editProduct').load('inventory/product/addProduct.action');
      });
    },
    editfunc : function(id) {
      $('#mainListProduct').hide(10,function() {
        $('#editProduct').load('inventory/product/editProduct.action',{
          'product.id' : id
        });
      });
    },
    viewfunc : function(id) {
      $('#mainListProduct').hide(10,function() {
        $('#editProduct').load('inventory/product/viewProduct.action',{
          'product.id' : id
        });
      });
    }
  });
</script>
<div style="width: 800px;" id="mainListProduct">
  <table id="listProduct"></table>
  <div id="pagingProduct"></div>
</div>
<div id="editProduct"></div>